<template>
	<view class="classlist">
		
		<!-- <view class="loadingLayout">
			<uni-load-more status="loading"></uni-load-more>
		</view> -->
		
		<view class="content">
			<navigator :url="`/pages/preview/preview?id=${item._id}&name=${ currentClassName}`" class="item" 
			v-for="item in classiFyList"
			:key="item._id"
			>			
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		
		<view class="loadingLayout" v-if="isLoadingMore">
			<uni-load-more :status="!isLoadingMore?'noMore':'loading'"></uni-load-more>
		</view>
		
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { apiGetWallList } from '@/api/classify/index.js'
const classiFyList = ref([])
const pageParams = reactive({
	pageNum: 1,
	pageSize: 15,
})
// 记录当前页面分类id
const currenClassId = ref(null)
// 当前记录的分类名称
const currentClassName = ref(null)
// 记录是否加载更多
const isLoadingMore = ref(true)
// 获取列表
onLoad(({ classid, name }) => {
	currentClassName.value = name
	uni.setNavigationBarTitle({
		title: name
	})
	currenClassId.value = classid
	getClassifyList()
})

const getClassifyList = async () => {
	const { data } = await apiGetWallList({
		classid: currenClassId.value,
		...pageParams
	})
	isLoadingMore.value = pageParams.pageSize === data.length
	classiFyList.value.push(...data) 
	// 存入缓存
	uni.setStorageSync('storeClassList',JSON.stringify(classiFyList.value))
}

// 触底
onReachBottom(() => {
	if(!isLoadingMore.value) return 
	pageParams.pageNum ++ 
	getClassifyList()
})
</script>

<style lang="scss" scoped>
.classlist{
	.content{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap:5rpx;
		padding:5rpx;
		.item{
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
}
</style>
